<template>
    <div style="margin-bottom:56px">
        <v-toolbar dark color="primary" style="box-shadow:none">
            <v-icon @click="$router.back(-1)">keyboard_arrow_left</v-icon>
            <v-toolbar-title>{{topic_title}}</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn  flat small color="white" @click="$router.push('/neighbor/'+topic_title+'/publish')">
                我要发布
            </v-btn>
        </v-toolbar>
        <v-layout row wrap style="background:#4caf50">
            <v-flex xs12>
                <v-layout class="search" justify-center align-center>
                    <v-flex offset-xs1 xs10>
                        <input style="heigh:25px;font-size:18px" placeholder="单肩包" single-line outline>
                    </v-flex>
                    <v-flex xs1><v-icon>search</v-icon></v-flex>
                </v-layout>
            </v-flex>
        </v-layout>
        <v-bottom-nav :active.sync="bottomNav" :value="true" color="secondary" height="40px">
            <v-btn value="all" dark>全部</v-btn>
            <v-btn value="hot" dark>热门</v-btn>
            <v-btn value="mine" dark>我的</v-btn>
            <v-btn value="village" dark>我的小区</v-btn>
        </v-bottom-nav>
        <v-layout>
            <v-flex xs12>
                <div v-for="(item, index) in posts" :key="index">
                    <v-list-tile avatar>
                        <v-list-tile-avatar>
                            <img src= "../../assets/logo.png" >
                        </v-list-tile-avatar>
                        <v-list-tile-content>
                            <v-list-tile-sub-title class="text--primary">
                                <h3>{{item.user_name}}</h3>
                                <h4 style="color:red"><v-icon size="15px">place</v-icon>{{item.community_name}}</h4>
                            </v-list-tile-sub-title>
                        </v-list-tile-content>
                        {{ item.creat_tiame}}
                    </v-list-tile>
                    <v-divider inset></v-divider>
                    <v-flex style="margin-left:56px; margin-top:5px">
                        <p @click="$router.push('/neighbor/'+topic_title+'/detail')">
                            <span class="green--text">#{{item.topic_title}}</span>
                            {{item.post_content}}
                        </p>
                        <v-layout row wrap>
                            <v-flex>
                                {{item.num_read}}阅读
                            </v-flex>
                            <v-flex>
                                <v-icon :color="item.like ? 'green' : 'grey'" @click="like(index)" size="15px">thumb_up</v-icon> {{item.num_like}}
                            </v-flex>
                            <v-flex>
                                <v-icon @click="$router.push('/neighbor/'+topic_title+'/detail')" size="15px">sms</v-icon> {{item.num_reply}}
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-card style="margin-top:5px" color="secondary lighten-5" dark tile flat>
                        <br/>
                    </v-card>
                </div>
            </v-flex>
        </v-layout>
    </div>
</template>

<script>
export default {
    data(){
        return{
            topic_title:this.$route.params.contact,
            bottomNav:'all',
            posts: [
                {user_name: '汪', community_name: '晋合世家', creat_tiame:'2016-4-8', topic_title: '宠物天地', post_content:'头像测试', num_read:'11', num_like:'10', num_reply:'2', like:true},
                {user_name: '杨', community_name: '金桥世家', creat_tiame:'2015-4-8', topic_title: '宠物天地', post_content:'测试', num_read:'10', num_like:'8', num_reply:'1', like:true}
            ]
        }
    },
    methods:{
        like(index){
            
        }
    }
}
</script>

<style scoped>
.search{
    height:50px;
    background:white;
    border-radius: 25px;
    margin:0 16px 16px 16px;
    padding: 0 10px 0 10px;
}
</style>